<template>
	<view v-if="userStore.userInfo.type == 1" class="page group-info">
		<nav-bar back>聊天信息({{groupMembers.length}})</nav-bar>
		<view class="group-detail" style="padding-bottom: 20rpx;">
			<view v-if="!group.quit" class="group-members">
				<view class="member-items">
					<view v-for="(member, idx) in groupMembersCopy" :key="idx">
						<view class="member-item">
							<head-image :id="member.userId" :name="member.showNickName" :url="member.headImage" size="small"
								:online="member.online"></head-image>
							<view class="member-name">
								{{ member.showNickName }}
							</view>
						</view>
					</view>
					<view class="invite-btn" @click.stop="onInviteMember('邀请')">
						<uni-icons type="plusempty" size="20" color="#888888"></uni-icons>
					</view>
					<view class="invite-btn" @click.stop="onInviteMember('移出')">
						<image src="/static/image/reduce.png" alt="" mode="widthFix" style="width: 20px;" />
					</view>
				</view>
				<view v-if="groupMembersCopy.length>10" class="member-more" @click="()=>{
				more=!more
				if(!more){
				 groupMembersCopy.length=10
				}else{
					groupMembersCopy=[...groupMembers]
				}
			}">{{ more?'收起 ∧':'更多群成员 ∨'}}</view>
			</view>
		</view>
		<arrow-bar title="群聊名称" :right="group.name" @click="onEditGroup('name')"></arrow-bar>
		<view class="detail-padding" @click="onEditGroup('notice')">
			<view class="notice">
				<view>
					群公告
					<view class="content">
						{{group.notice}}
					</view>
				</view>
				<uni-icons class="arrow" type="right" color="#b3b3b3" size="16"></uni-icons>
			</view>
		</view>
		<arrow-bar v-if="isAdmin" title="群管理" @click="groupManagement()"></arrow-bar>
		<arrow-bar title="备注" :right="group.remarkGroupName" @click="onEditGroup('remarkGroupName')"></arrow-bar>
		<arrow-bar title="我在群里的昵称" :right="group.showNickName" @click="onEditGroup('showNickName')"></arrow-bar>

		<view class="group-detail" style="padding-bottom: 20rpx;">
			<bar-group v-if="!group.quit">
				<btn-bar type="primary" title="发消息" @tap="onSendMessage()"></btn-bar>
				<btn-bar v-if="1" type="danger" title="退出群聊" @tap="$refs.popup.open()"></btn-bar>
				<btn-bar v-if="0" type="danger" title="解散该群聊" @tap="$refs.popup2.open()"></btn-bar>
			</bar-group>
		</view>
		<popup-modal ref="popup" title="退出群聊" @confirm="confirm()">退出群聊后将不再接受群里的消息，确认退出吗?</popup-modal>
		<popup-modal ref="popup2" title="解散群聊" @confirm="confirm2()">确认要解散群聊'{{group.name}}'吗?</popup-modal>
		<popup-modal ref="popup3" title="解散成功" @confirm="confirm3()"
			@close3="confirm3()">群聊'{{group.name}}'已解散</popup-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				group: {},
				groupMembers: [],
				groupMembersCopy: [],
				more: false
			}
		},
		methods: {
			onFocusSearch() {},
			onInviteMember(type) {
				uni.navigateTo({
					url: `/pages/group/group-invite?id=${this.groupId}&type=${type}`
				})
			},
			// 查看全部成员
			onShowMoreMmeber() {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=showAllMmeber`
				})
			},
			// 邀请人列表
			onInviters() {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=inviters`
				})
			},
			// 群聊黑名单
			onBlacklist(e) {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=blacklist`
				})
			},
			// 禁言
			noSpeaking(e) {
				uni.navigateTo({
					url: `/pages/group/group-member?id=${this.groupId}&form=noSpeaking`
				})
			},
			onEditGroup(type) {
				uni.navigateTo({
					url: `/pages/group/edit-item?id=${this.groupId}&type=${type}`
				})
			},
			onSendMessage() {
				let chat = {
					type: 'GROUP',
					targetId: this.group.id,
					showName: this.group.showGroupName,
					headImage: this.group.headImage,
				};
				this.chatStore.openChat(chat);
				let chatIdx = this.chatStore.findChatIdx(chat);
				uni.navigateTo({
					url: "/pages/chat/chat-box?chatIdx=" + chatIdx
				})
			},
			confirm() {
				this.$http({
					url: `/group/quit/${this.groupId}`,
					method: 'DELETE'
				}).then(() => {
					uni.showModal({
						title: `退出成功`,
						content: `您已退出群聊'${this.group.name}'`,
						showCancel: false,
						success: () => {
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/group/group"
								});
								this.groupStore.removeGroup(this.groupId);
								this.chatStore.removeGroupChat(this
									.groupId);
							}, 100)
						}
					})
				});
			},
			confirm2() {
				this.$http({
					url: `/group/delete/${this.groupId}`,
					method: 'delete'
				}).then(() => {
					this.$refs.popup3.open()
				});
			},
			confirm3() {
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/group/group"
					});
					this.groupStore.removeGroup(this.groupId);
					this.chatStore.removeGroupChat(this.groupId);
				}, 100)
			},
			onQuitGroup() {
				uni.showModal({
					title: '确认退出?',
					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/quit/${this.groupId}`,
							method: 'DELETE'
						}).then(() => {
							uni.showModal({
								title: `退出成功`,
								content: `您已退出群聊'${this.group.name}'`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/group/group"
										});
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this
											.groupId);
									}, 100)
								}
							})
						});
					}
				});
			},
			onDissolveGroup() {
				uni.showModal({
					title: '确认解散?',
					content: `确认要解散群聊'${this.group.name}'吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/delete/${this.groupId}`,
							method: 'delete'
						}).then(() => {
							uni.showModal({
								title: `解散成功`,
								content: `群聊'${this.group.name}'已解散`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/group/group"
										});
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this.groupId);
									}, 100)
								}
							})
						});
					}
				});

			},
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					this.group = group;
					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);
				});
			},
			loadGroupMembers() {
				this.$http({
					url: `/group/members/${this.groupId}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					this.groupMembersCopy = [...this.groupMembers]
					this.groupMembersCopy.length > 10 && (this.groupMembersCopy.length = 10)
					console.log('群成员', this.groupMembers)
				})
			},
			groupManagement() {
				uni.navigateTo({
					url: `/pages/group/group-management?id=${this.groupId}`
				})
			},
			// 邀请权限
			invitationPermission(e) {
				this.$http({
					url: `/group/updateIsInvite`,
					method: "PUT",
					data: {
						"id": this.group.id,
						"name": this.group.name,
						"isInvite": e.detail.value ? "1" : "0"
					}
				}).then((res) => {
					console.log(res)
				})
			},
		},
		computed: {
			ownerName() {
				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
				return member && member.showNickName;
			},
			isOwner() {
				console.log('用户信息', this.userStore.userInfo)
				return this.group.ownerId == this.userStore.userInfo.id;
			},
			// 判断是否是群主或管理员
			isAdmin(e) {
				if (this.isOwner) return true
				const userInfo = this.groupMembers.find((m) => m.userId == this.userStore.userInfo.id)
				if (userInfo && userInfo.isAdmin === '1') return true
				return false
			},
		},
		onLoad(options) {
			this.groupId = options.id;
			// 查询群聊信息
			this.loadGroupInfo();
			// 查询群聊成员
			this.loadGroupMembers(options.id)
		}

	}
</script>

<style lang="scss" scoped>
	.group-info {

		// 左右两段对其布局
		.flex-bet {
			display: flex;
			justify-content: space-between;

			view:last-child {
				color: #ccc;
				font-size: 24rpx;
			}
		}

		.group-members {
			padding: 30rpx;
			background: white;

			.member-items {
				display: flex;
				flex-wrap: wrap;

				.member-item {
					width: 120rpx;
					display: flex;
					flex-direction: column;
					margin: 8rpx 2rpx;
					position: relative;
					align-items: center;
					padding-right: 5px;
					white-space: nowrap;

					.member-name {
						width: 100%;
						flex: 1;
						text-align: center;
						padding-top: 8rpx;
						font-size: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #ccc;
					}
				}

				.invite-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 86rpx;
					height: 86rpx;
					margin: 10rpx;
					border: #ccc dashed 2rpx;
					border-radius: 10%;
				}
			}

			.member-more {
				padding-top: 24rpx;
				text-align: center;
				font-size: $im-font-size-small;
				color: $im-text-color-lighter;
			}
		}

		.detail-padding {
			padding: 0 20rpx;
			background-color: #fff;
			margin-top: 1rpx;

			.notice {
				padding: 16rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.content {
					color: #ccc;
					font-size: 24rpx
				}
			}
		}
	}

	.disband {
		background-color: #fe234d;
		border-radius: 10rpx;
		color: #fff;
		width: 90%;
		margin: 20rpx auto;
	}
</style>